<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸿蒙分布式家庭健康管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        harmony: {
                            blue: '#0A59F7',
                            lightblue: '#E8F3FF',
                            green: '#00B42A',
                            yellow: '#FF7D00',
                            red: '#F53F3F',
                            gray: '#86909C',
                            lightgray: '#F2F3F5'
                        }
                    },
                    fontFamily: {
                        harmony: ['HarmonyOS Sans', 'PingFang SC', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(10, 89, 247, 0.1), 0 10px 10px -5px rgba(10, 89, 247, 0.04);
            }
            .device-frame {
                border: 12px solid #111;
                border-radius: 40px;
                box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            }
            .device-frame::before {
                content: '';
                position: absolute;
                top: -2px;
                left: 50%;
                transform: translateX(-50%);
                width: 40%;
                height: 20px;
                background-color: #111;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
        }
    </style>
</head>
<body class="font-harmony bg-gray-50 text-gray-800">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="text-harmony-blue font-bold text-xl flex items-center">
                        <i class="fa fa-heartbeat mr-2"></i>
                        <span>家庭健康管家</span>
                    </div>
                </div>
                
                <!-- 桌面端导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#overview" class="text-gray-600 hover:text-harmony-blue transition-colors">项目概述</a>
                    <a href="#features" class="text-gray-600 hover:text-harmony-blue transition-colors">核心功能</a>
                    <a href="#devices" class="text-gray-600 hover:text-harmony-blue transition-colors">设备适配</a>
                    <a href="#tech" class="text-gray-600 hover:text-harmony-blue transition-colors">技术依赖</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button type="button" id="menuBtn" class="text-gray-600 hover:text-harmony-blue">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#overview" class="block text-gray-600 hover:text-harmony-blue transition-colors">项目概述</a>
                <a href="#features" class="block text-gray-600 hover:text-harmony-blue transition-colors">核心功能</a>
                <a href="#devices" class="block text-gray-600 hover:text-harmony-blue transition-colors">设备适配</a>
                <a href="#tech" class="block text-gray-600 hover:text-harmony-blue transition-colors">技术依赖</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="pt-28 pb-16 md:pt-36 md:pb-24 bg-gradient-to-br from-harmony-lightblue to-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-900 leading-tight mb-4">
                        鸿蒙分布式<br>
                        <span class="text-harmony-blue">家庭健康管家</span>
                    </h1>
                    <p class="text-lg text-gray-600 mb-8 max-w-lg">
                        整合家庭健康设备数据，实现多端同步管理、健康分析与异常提醒，让家庭健康管理更简单。
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#features" class="bg-harmony-blue hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-all shadow-lg hover:shadow-xl">
                            了解功能
                        </a>
                        <a href="#overview" class="bg-white hover:bg-gray-100 text-harmony-blue border border-harmony-blue px-6 py-3 rounded-lg transition-all">
                            项目概述
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 relative">
                    <div class="device-frame relative w-[280px] mx-auto">
                        <img src="https://picsum.photos/id/1083/600/1200" alt="鸿蒙家庭健康管家应用界面" class="w-full h-auto rounded-[30px]">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目概述 -->
    <section id="overview" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">项目概述</h2>
                <div class="w-20 h-1 bg-harmony-blue mx-auto"></div>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="bg-lightgray rounded-xl p-6 md:p-8 mb-8">
                    <h3 class="text-xl font-semibold mb-4 text-harmony-blue">核心目标</h3>
                    <p class="text-gray-700 leading-relaxed">
                        打破家庭健康设备数据壁垒，通过鸿蒙分布式技术实现"一次连接、多端同步"，为家庭成员提供便捷的健康数据管理与健康风险预警服务。
                    </p>
                </div>
                
                <div class="bg-lightgray rounded-xl p-6 md:p-8 mb-8">
                    <h3 class="text-xl font-semibold mb-4 text-harmony-blue">面向用户</h3>
                    <ul class="text-gray-700 space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-harmony-green mt-1 mr-2"></i>
                            <span>有老人/儿童的家庭用户</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-harmony-green mt-1 mr-2"></i>
                            <span>关注家庭成员健康的中青年群体</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-harmony-green mt-1 mr-2"></i>
                            <span>拥有多种健康监测设备的家庭</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-lightgray rounded-xl p-6 md:p-8">
                    <h3 class="text-xl font-semibold mb-4 text-harmony-blue">解决的问题</h3>
                    <ul class="text-gray-700 space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-exclamation-circle text-harmony-yellow mt-1 mr-2"></i>
                            <span>多设备数据分散，难以集中管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-exclamation-circle text-harmony-yellow mt-1 mr-2"></i>
                            <span>老人操作复杂，使用门槛高</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-exclamation-circle text-harmony-yellow mt-1 mr-2"></i>
                            <span>健康数据趋势难以追踪分析</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-exclamation-circle text-harmony-yellow mt-1 mr-2"></i>
                            <span>家庭成员健康状况难以共享关注</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">核心功能</h2>
                <div class="w-20 h-1 bg-harmony-blue mx-auto"></div>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    基于鸿蒙分布式能力，提供全方位家庭健康管理解决方案
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 功能卡片1：分布式设备连接 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-harmony-lightblue rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-wifi text-2xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">分布式设备连接</h3>
                    <ul class="text-gray-600 space-y-2 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>自动发现家庭内健康设备</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>支持多品牌鸿蒙兼容设备</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>手机端发起，多设备同步响应</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片2：健康数据管理 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-harmony-lightblue rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-database text-2xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">健康数据管理</h3>
                    <ul class="text-gray-600 space-y-2 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>自动采集核心健康指标</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>生成日/周/月数据趋势图表</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>支持手动录入非智能设备数据</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片3：健康分析与提醒 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-harmony-lightblue rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-bell text-2xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">健康分析与提醒</h3>
                    <ul class="text-gray-600 space-y-2 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>自动判断指标是否异常</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>异常数据实时推送提醒</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>每月生成家庭健康报告</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片4：家庭成员共享 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="w-14 h-14 bg-harmony-lightblue rounded-lg flex items-center justify-center mb-5">
                        <i class="fa fa-users text-2xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">家庭成员共享</h3>
                    <ul class="text-gray-600 space-y-2 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>支持添加5名以内家庭成员</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>通过鸿蒙账号邀请成员</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-angle-right text-harmony-blue mt-1 mr-2"></i>
                            <span>可设置数据查看权限</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 功能演示 -->
            <div class="mt-20">
                <h3 class="text-2xl font-semibold text-center mb-10">数据管理界面演示</h3>
                <div class="flex flex-col lg:flex-row gap-8 items-center justify-center">
                    <div class="device-frame relative w-[240px]">
                        <img src="https://picsum.photos/id/1060/500/1000" alt="手机端健康数据界面" class="w-full h-auto rounded-[30px]">
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-md w-full lg:w-auto">
                        <h4 class="text-lg font-semibold mb-4">健康数据趋势图</h4>
                        <div class="w-full h-64">
                            <canvas id="healthChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 设备适配 -->
    <section id="devices" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">设备适配</h2>
                <div class="w-20 h-1 bg-harmony-blue mx-auto"></div>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    支持多种鸿蒙设备与健康监测设备，实现全方位数据整合
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                <!-- 支持的鸿蒙设备 -->
                <div>
                    <h3 class="text-xl font-semibold mb-6 text-center">支持的鸿蒙设备</h3>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-mobile text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">手机</p>
                            <p class="text-xs text-gray-500 mt-1">6.0-7.2英寸</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-tablet text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">平板</p>
                            <p class="text-xs text-gray-500 mt-1">8.0-12.6英寸</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-television text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">智慧屏</p>
                            <p class="text-xs text-gray-500 mt-1">55-75英寸</p>
                        </div>
                    </div>
                    
                    <div class="mt-8 p-4 bg-lightgray rounded-lg">
                        <h4 class="font-medium mb-2">系统要求</h4>
                        <p class="text-gray-600 text-sm">鸿蒙 2.0 及以上版本</p>
                    </div>
                </div>
                
                <!-- 支持的健康设备 -->
                <div>
                    <h3 class="text-xl font-semibold mb-6 text-center">支持的健康设备</h3>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-clock-o text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">智能手表</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-balance-scale text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">体脂秤</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-heartbeat text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">血压计</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-flask text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">血糖仪</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-thermometer text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">体温计</p>
                        </div>
                        
                        <div class="flex flex-col items-center text-center">
                            <div class="w-16 h-16 bg-harmony-lightblue rounded-full flex items-center justify-center mb-3">
                                <i class="fa fa-bed text-3xl text-harmony-blue"></i>
                            </div>
                            <p class="text-gray-700">睡眠监测</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术依赖 -->
    <section id="tech" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">技术依赖</h2>
                <div class="w-20 h-1 bg-harmony-blue mx-auto"></div>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-lg font-semibold text-harmony-blue">鸿蒙核心技术</h3>
                    </div>
                    <div class="p-6">
                        <ul class="space-y-4">
                            <li class="flex">
                                <div class="flex-shrink-0 w-10 h-10 bg-harmony-lightblue rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-code text-harmony-blue"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">鸿蒙 SDK（API Version 9 及以上）</h4>
                                    <p class="text-sm text-gray-600 mt-1">基础开发环境与应用框架支持</p>
                                </div>
                            </li>
                            
                            <li class="flex">
                                <div class="flex-shrink-0 w-10 h-10 bg-harmony-lightblue rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-database text-harmony-blue"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">分布式数据管理（Distributed Data Management）</h4>
                                    <p class="text-sm text-gray-600 mt-1">实现多设备间数据同步与共享</p>
                                </div>
                            </li>
                            
                            <li class="flex">
                                <div class="flex-shrink-0 w-10 h-10 bg-harmony-lightblue rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-sitemap text-harmony-blue"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">设备协作（Device Collaboration）能力</h4>
                                    <p class="text-sm text-gray-600 mt-1">支持多设备协同工作与任务分发</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden mt-6">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-lg font-semibold text-harmony-blue">第三方集成</h3>
                    </div>
                    <div class="p-6">
                        <ul class="space-y-4">
                            <li class="flex">
                                <div class="flex-shrink-0 w-10 h-10 bg-harmony-lightblue rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-heartbeat text-harmony-blue"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">HUAWEI Health Kit</h4>
                                    <p class="text-sm text-gray-600 mt-1">华为健康设备数据接入协议</p>
                                </div>
                            </li>
                            
                            <li class="flex">
                                <div class="flex-shrink-0 w-10 h-10 bg-harmony-lightblue rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-bluetooth text-harmony-blue"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">蓝牙 5.0 BLE</h4>
                                    <p class="text-sm text-gray-600 mt-1">健康设备无线连接标准</p>
                                </div>
                            </li>
                            
                            <li class="flex">
                                <div class="flex-shrink-0 w-10 h-10 bg-harmony-lightblue rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-shield text-harmony-blue"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">鸿蒙分布式数据安全规范</h4>
                                    <p class="text-sm text-gray-600 mt-1">确保健康数据安全存储与传输</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 非功能需求 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">非功能需求</h2>
                <div class="w-20 h-1 bg-harmony-blue mx-auto"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div class="bg-lightgray rounded-xl p-6">
                    <div class="w-12 h-12 bg-harmony-lightblue rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-check-square-o text-xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-3">兼容性</h3>
                    <p class="text-gray-600 text-sm">
                        支持鸿蒙2.0及以上版本，适配手机（6.0-7.2英寸）、平板（8.0-12.6英寸）、智慧屏（55-75英寸）。
                    </p>
                </div>
                
                <div class="bg-lightgray rounded-xl p-6">
                    <div class="w-12 h-12 bg-harmony-lightblue rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-lock text-xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-3">安全性</h3>
                    <p class="text-gray-600 text-sm">
                        健康数据加密存储（遵循鸿蒙分布式数据安全规范），仅授权设备可访问，保障用户隐私。
                    </p>
                </div>
                
                <div class="bg-lightgray rounded-xl p-6">
                    <div class="w-12 h-12 bg-harmony-lightblue rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-tachometer text-xl text-harmony-blue"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-3">性能</h3>
                    <p class="text-gray-600 text-sm">
                        设备发现响应时间≤3秒，数据同步延迟≤1秒，图表加载时间≤2秒，确保流畅体验。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="text-xl font-bold flex items-center">
                        <i class="fa fa-heartbeat mr-2"></i>
                        <span>鸿蒙分布式家庭健康管家</span>
                    </div>
                    <p class="text-gray-400 mt-2 text-sm">
                        让家庭健康管理更简单
                    </p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-gitee text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weixin text-2xl"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2023 鸿蒙分布式家庭健康管家. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('mobileMenu').classList.add('hidden');
                }
            });
        });
        
        // 健康数据图表
        const ctx = document.getElementById('healthChart').getContext('2d');
        const healthChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
                datasets: [
                    {
                        label: '血压(收缩压)',
                        data: [125, 128, 130, 127, 122, 120, 118],
                        borderColor: '#0A59F7',
                        backgroundColor: 'rgba(10, 89, 247, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '心率',
                        data: [72, 75, 70, 73, 68, 71, 69],
                        borderColor: '#00B42A',
                        backgroundColor: 'rgba(0, 180, 42, 0.1)',
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        grid: {
                            drawBorder: false
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
